
<template>
  <div id="nav">
    <!-- 轮播图 -->
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>
        <img src="../assets/banner1.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/banner2.jpeg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/banner3.jpeg" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- navlist -->
    <div class="navlist">
      <div class="list_item">
        <p>用途</p>
        <div>
          <a href="#">爱情鲜花</a>
          <a href="#">生日鲜花</a>
          <a href="#">友情鲜花</a>
          <a href="#">探病问候</a>
          <a href="#">道歉鲜花</a>
          <a href="#">问候长辈</a>
          <a href="#">感谢老师</a>
          <a href="#">哀思鲜花</a>
          <a href="#">上午鲜花</a>
        </div>
      </div>
      <div class="list_item">
        <p>花材</p>
        <div>
          <a href="#">玫瑰</a>
          <a href="#">百合</a>
          <a href="#">康乃馨</a>
          <a href="#">向日葵</a><br>
          <a href="#">满天星</a>
          <a href="#">郁金香</a>
          <a href="#">菊花</a>
          <a href="#">其它</a>
        </div>
      </div>
      <div class="list_item">
        <p>类别</p>
        <div>
          <a href="#">花束</a>
          <a href="#">礼盒</a>
          <a href="#">蛋糕</a>
          <a href="#">花篮</a>
          <a href="#">绿植</a><br>
          <a href="#">周花</a>
          <a href="#">手提花篮</a>
          <a href="#">桌花</a>
          <a href="#">其它</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // swiper配置项，通过 :options绑定给swiper组件
        swiperOption:{
          // 切换效果   cube :立方体   fade渐变   coverflow  flip cards creative
          //swiper的官网的 api 文档中，有所有相关信息
          effect:'slide',
          // 是否控制循环滚动     就是滚到最后一张  再跳回第一张继续滚动
          loop:true,
          // 自动滚动   默认 true
          // autoplay:true,
          //可手动设置
          autoplay:{
            delay:3000,//滚动间隔时长，单位毫秒
            //触摸后自动滚动失效    false代表关闭此功能
            disableOnInteraction:false,
          },
          //页数点的配置项
          pagination:{
            el:'.swiper-pagination',
            clickable:true,//点点  可以点
          },
          navigation: {
            nextEl: '.swiper-button-next',//注意  是修改class为这个的东西    所以必须 加  .   不加不出效果
            prevEl: '.swiper-button-prev',
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
#nav{
  width: 1000px;
  position: relative;
}
  .swiper{
    width: 1000px;
    margin: 0 auto;
    img{
      width: 1200px;
    }
  }
  .navlist{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 40px;
    width: 200px;
    height: 290px;
    box-sizing: border-box;
    padding: 10px 20px;
    background-color: #fff;
    font-size: 12px;
    border-bottom:3px solid #884e22 ;
    .list_item:last-child{
      border-bottom: 0;
    }
    .list_item{
      margin-top: 8px;
      border-bottom: 1px solid #999;
      p{
        font-size: 15px;
        color: #884e22;
        margin: 0;
      }
      >div{
        margin-top: 8px;
        height: 55px;
        a{
          text-decoration: none;
          color: #999;
          margin-right: 5px;
        }
        a:hover{
          color: #884e22;
        }
      }
    }
  }
</style>